<!--系统登录-->
<template>
  <div id="login">
    <div class="box">
      <div class="title">重置密码</div>
      <el-form :model="pwdFormData" :rules="pwdRules" ref="pwdForm">
        <el-form-item label="" prop="loginName">
          <el-input v-model.trim="pwdFormData.loginName" placeholder="请输入手机号码" maxlength="11" prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item class="password-input" prop="smsPwd">
          <el-input v-model="pwdFormData.smsPwd" maxlength="6" placeholder="请输入短信验证码" prefix-icon="el-icon-message">
            <el-button v-if="!this.verification" slot="append" class="verification-code" @click="sendVerificationCode('pwdForm')">发送验证码</el-button>
            <el-button v-if="this.verification" slot="append" class="verification-code2">{{timer}}秒后重新发送</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="loginPwd">
          <el-input v-model="pwdFormData.loginPwd" placeholder="设置6至20位登录密码" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="" prop="loginPwds">
          <el-input v-model="pwdFormData.loginPwds" placeholder="请再次输入登录密码" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!--按钮部分-->
        <el-form-item>
          <el-button type="primary" @click="resetSubmitForm('pwdForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { cloneDeep } from 'lodash'
import { REG, TEXT_MESSAGE } from '@/utils/verification'
import { publicKey } from '@/utils'
import { JSEncrypt } from 'jsencrypt'
export default {
  name: 'login',
  data () {
    let checkphone = (rule, value, callback) => {
      let phoneReg = /^1\d{10}$/;
      if (value === '') {
        callback(new Error('请输入手机号码'));
      } else if (!phoneReg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    }
    let checkConfirmPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入登录密码!'))
      }else if (value !== this.pwdFormData.loginPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'pwd',
      verification: false,
      timer: 60,
      img: '',
      pwdFormData: {
        loginName: '',
        smsPwd:'',
        loginPwd: '',
        loginPwds: '',
        tempToken: ''
      },
      pwdRules: {
        loginName: [
          { required: true, validator: checkphone, trigger: 'blur' }
        ],
        smsPwd: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '登录密码不能为空', trigger: 'blur' },
          { pattern: REG.passWord, message: TEXT_MESSAGE.passWord, trigger: 'blur' }
        ],
        loginPwds: [
          { required: true, validator: checkConfirmPwd, trigger: 'blur' }
        ],
      },
      redirect: '',
      clickCount: 0,
      checkpwd: false,
    }
  },
  created() {
    
  },
  mounted() {
    let redirect = this.$route.query.redirect || ''
    this.redirect = window.atob(redirect)
  },
  methods: {
    /* 发送短信验证码 */
    sendVerificationCode (formName) {
      if(this.clickCount) return false
      this.$refs[formName].validateField('loginName',(errMsg) => {
        if (errMsg) {
          this.clickCount=0
          return false
        } else {
          this.clickCount ++
          this.$api.business.sendSms({
            //projectId: this.$store.state.user.projectId,
            loginName: this.pwdFormData.loginName
          }).then(res => {
            this.pwdFormData.tempToken=res.data.tempToken
            this.$message({
              message: '验证码发送成功',
              type: 'success'
            })
            this.timer = 60
            this.verification = true
            this.clickCount = 0
            let auth_timer = setInterval(() => {  //定时器设置每秒递减
              this.timer--;
              if(this.timer===0) {
                this.verification = false
                clearInterval(auth_timer)
              }
            },1000)
          });
        }
      })
    },
    /* 重置 */
    resetSubmitForm (formName) {
      if(this.clickCount) return false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { smsPwd, loginPwd, tempToken } = this.pwdFormData
          const key = publicKey()
          const encryptor = new JSEncrypt()
          encryptor.setPublicKey(key)
          const encrypted = encryptor.encrypt(loginPwd)
          this.clickCount ++
          this.$api.business.smsResetPwd({
            //projectId: this.$store.state.user.projectId,
            smsPwd,
            tempToken,
            loginPwd: encrypted
          }).then(res => {
            console.log(res)
            this.$message({
              message: '密码重置成功',
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/login')
            },1000)
          }).catch(() => {
            this.clickCount = 0
          })
        } else {
          this.clickCount=0
          return false
        }
      })
    },
  }
}
</script>
<style lang="scss">
#login{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #eee;
  .box{
    background: #fff;
    min-width: 400px;
    -ms-flex-item-align: center;
    align-self: center;
    padding: 30px 20px;
    margin: -100px 0 0 0;
    .title{
      color: #333;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 35px;
    }
    .el-form-item{
      margin-bottom: 22px;
      &:last-child{
        margin-bottom: 10px;
      }
    }
    .el-input__icon{
      font-size: 18px;
      width: 35px;
      &::before{
        position: relative;
        top: 2px;
      }
    }
    .password-input {
      .el-button {
        width: 100%;
        font-size: 14px;
      }
    }
    .verification-code {
      text-align: center;
      color: #fff;
      background: #1890ff;
      width: 150px !important;
      height: 44px;
    }
    .verification-code2 {
      text-align: center;
      color: #fff;
      background: #ccc;
      width: 150px !important;
      height: 44px;
    }
    .el-input{
      position: relative;
      input.el-input__inner{
        height: 44px;
        line-height: 44px;
        padding-left: 40px;
      }
    }
    .el-button{
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>

